<template>
  <h1 v-text="num"></h1>
  <button @click="sub">自减</button>
  <button @click="add">自增</button>
  <hr />
  <input type="text" v-model="task" @keyup.enter="confirm">
  <div v-for="(item, idx) in list">
    <span>{{ item.id }}</span>
    ---
    <span>{{ item.task }}</span>
    <button @click="delTodo(idx)">X</button>
  </div>
</template>

<!-- <script setup>
import { ref, reactive } from "vue"
const num = ref(10);
const task = ref("");
let list = reactive([]);

const add = () => {
  num.value += 2
}
const sub = () => {
  num.value -= 2
}

const confirm = () => {
  console.log(task.value);
  if (task.value.trim()) {
    list.push({
      id: Date.now(),
      task: task.value
    })
    task.value = "";
  }
}
const delTodo = (idx) => {
  list.splice(idx,1)
}
</script> -->

<script setup>
import useCounter from "../../hooks/useCounter"
import useTodoList from "../../hooks/useTodoList"

const { num, add, sub } = useCounter();
const { task, list, confirm, delTodo } = useTodoList();
</script>